import { Navigate } from 'react-router-dom'
import Home from '../pages/Home'
import HomeRecommend from '../pages/HomeRecommend'
import HomeSongeMenu from '../pages/HomeSongMenu'
import HomeRanking from '../pages/HomeRanking'
// import About from '../pages/About'
// import Login from '../pages/Login'
import Category from '../pages/Category'
import Order from '../pages/Order'
import Detail from '../pages/Detail'
import User from '../pages/User'
import NotFound from '../pages/NotFound'
import React from 'react'

// 分包处理 import属于webpack的特性
const About = React.lazy(() =>
  import(/** webpackChunkName: "About Page" **/ '../pages/About')
)
const Login = React.lazy(() =>
  import(/**  webpackChunkName: "Login Page" **/ '../pages/Login')
)

const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />,
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: '/home',
        element: <Navigate to="/home/recommend" />,
      },
      {
        path: '/home/recommend',
        element: <HomeRecommend />,
      },
      {
        path: '/home/ranking',
        element: <HomeRanking />,
      },
      {
        path: '/home/songMenu',
        element: <HomeSongeMenu />,
      },
    ],
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/category',
    element: <Category />,
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/order',
    element: <Order />,
  },
  {
    path: '/detail/:id',
    element: <Detail />,
  },
  {
    path: '/user',
    element: <User />,
  },
  {
    path: '*',
    element: <NotFound />,
  },
]

export default routes
